<template>
  <div class="home">
    <div class="header">
      <mu-appbar title="userList">
        <mu-flat-button label="用户列表" slot="default"/>
      </mu-appbar>
    </div>
    <div>
      <mu-list>
        <mu-list-item :title="user.nickname" :key="user.id" v-for="user in userList" @click="chat(user)">
          <mu-avatar :src="user.headimg" slot="leftAvatar"/>
        </mu-list-item>
      </mu-list>
    </div>
  </div>
</template>

<script>
  //  import {mapGetters} from 'vuex'
  import axios from 'axios'
  import qs from 'qs'
  import {save, load} from '../util/cache'

  export default{
    data() {
      return {

      }
    },
    methods: {
      chat(user) {
        this.$store.dispatch('appSetChatUser', user);
        this.$store.dispatch('appSetNewMessage', false);

        this.loginUser = this.$store.state.app.loginUser;

        let cache = load();
        let content = cache.messages.filter((item) => {
          let message = JSON.parse(item);
          return (message.fromUser === user.id && message.toUser === this.loginUser.id) ||
            (message.toUser === user.id && message.fromUser === this.loginUser.id);
        });
//        console.log(cache.messages)
        this.$store.dispatch('appSetChatContent', content);
        this.$store.dispatch('appSetNewMessage', false);
        this.$router.push('/chat');
      }
    },
    computed: {
      userList() {
        return this.$store.state.app.userList;
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">

  .header
    position fixed
    width 100%
    top 0
    left 0
    z-index 10
  .home
    padding-top 60px
</style>
